import styled from 'styled-components';

const VideoEditorContainer = styled.div`
  width: 960px;
  overflow: hidden;
`;

const MainView = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    #fff;

  @media (min-height: 940px) {
    height: 540px;
  }

  @media (max-height: 939px) and (min-width: 880px) {
    height: 480px;
  }

  @media (max-height: 879px) and (min-width: 820px) {
    height: 420px;
  }

  @media (max-height: 819px) and (min-width: 760px) {
    height: 360px;
  }

  @media (max-height: 759px) and (min-width: 700px) {
    height: 300px;
  }
`;

const ImageView = styled.img`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
`;

export { ImageView, MainView, VideoEditorContainer };
